<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/WEB-INF/views/include/taglib.jsp" %>
<html>
<head>
    <title>用户选择</title>
    <%@ include file="../../include/head.jsp" %>
    <link rel="stylesheet" href="${ctxStatic}/3rd-lib/jquery-ztree/css/zTreeStyle.css">
</head>
<body>
<div class="admin-content">
    <div class="am-g">
        <div class="am-u-sm-12">
            <div class="am-panel-group" id="accordion">
                <div class="am-panel am-panel-default">
                    <div class="am-panel-hd">
                        <h4 class="am-panel-title" data-am-collapse="{parent: '#accordion', target: '#tab1'}">
                            查询条件
                        </h4>
                    </div>
                    <div id="tab1" class="am-panel-collapse am-collapse am-in">
                        <div class="am-panel-bd">
                            <form id="searchForm" class="am-form-inline" action="${ctx}/user/selectUser" method="post">
                                <input id="pageNo" name="pageNo" type="hidden" value="${page.pageNo}"/>
                                <input id="pageSize" name="pageSize" type="hidden" value="${page.pageSize}"/>
                                <input id="users" name="users" type="hidden"
                                       value="<c:forEach items="${users}" var="item">${item},</c:forEach>"/>

                                <div class="am-form-group">
                                    <label>姓名</label>
                                    <input type="text" name="name" value="${page.entity.name}" class="am-form-field">
                                </div>
                                <div class="am-form-group">
                                    <label>手机号</label>
                                    <input type="text" name="mobile" value="${page.entity.mobile}"
                                           class="am-form-field">
                                </div>
                                <div class="am-form-group">
                                    <button type="submit" class="am-btn am-btn-success" onclick="initSearchForm()"><i
                                            class="am-icon-search"></i> 查询
                                    </button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
            <div class="am-panel am-panel-default">
                <div class="am-panel-hd">
                    用户列表
                    <button type="button" id="okSelect" class="am-btn am-btn-primary am-btn-xs iu-right" onclick="">
                        确认选择
                    </button>
                </div>
                <div class="am-panel-bd">
                    <table class="am-table am-table-striped am-table-hover table-main">
                        <thead>
                        <tr>
                            <th>选择</th>
                            <th>姓名</th>
                            <th>手机号</th>
                        </tr>
                        </thead>
                        <tbody>
                        <c:forEach items="${page.list}" var="user" varStatus="status">
                            <tr>
                                <td><input value="${user.id}" type="checkbox" onclick="clickSelect(this)"/></td>
                                <td>${user.name}</td>
                                <td>${user.mobile}</td>
                            </tr>
                        </c:forEach>
                        </tbody>
                    </table>
                    <%@ include file="../../utils/pagination.jsp" %>
                </div>
            </div>
        </div>
    </div>
</div>
<%@ include file="../../include/bottom.jsp" %>
<script src="${ctxStatic}/3rd-lib/jquery-ztree/js/jquery.ztree.core-3.5.min.js"></script>
<script>
    $(document).ready(function () {
        //确认选择
        $("#okSelect").click(function () {
            var ids = $("#users").val();
            if (ids != '') {
                //过滤处理
                var users = ids.split(",");
                var idss = "";
                for (var i = 0; i < users.length; i++) {
                    if (users[i] != "") {
                        idss += users[i] + ",";
                    }
                }
                //调用父级的处理方法
                if (idss != "") {
                    parent.callSelectUser(idss);
                    closeModel(false);
                } else {
                    iuMsg('请先选择用户');
                }
            } else {
                iuMsg('请先选择用户');
            }
        });

        //初始化选择
        var idArray = $("#users").val().split(",");
        for (var i = 0; i < idArray.length; i++) {
            $("input[value='" + idArray[i] + "']").attr("checked", "checked");
        }
    });

    //点击选择
    function clickSelect(o) {
        var ids = $("#users").val();
        if ($(o).is(':checked')) {
            ids += $(o).val() + ",";
        } else {
            var idArray = $("#users").val().split(",");
            ids = removeArray(idArray, $(o).val());
        }
        $("#users").val(ids);
    }

    //删除数组
    function removeArray(vals, val) {
        var temp = [];
        for (var i = 0; i < vals.length - 1; i++) {
            if (vals[i] != val) {
                temp.push(vals[i])
            }
        }
        if (temp.length > 0) {
            return temp.toString() + ",";
        } else {
            return "";
        }

    }
</script>
</body>
</html>
